<template>
  <div class="bg-[#FAF9F9] lg:mx-0 px-4">
    <div class="mx-auto max-w-7xl">
      <!-- 面包屑-->
      <!-- 面包屑-->
      <!-- 面包屑-->
      <div class="flex justify-between items-center py-4 w-full">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: localePath('/') }">
            <div class="flex items-center">
              <i class="el-icon-s-home mr-1 text-lg"></i>
            </div>
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: localePath('/support') }" class="flex items-center capitalize whitespace-nowrap">{{
            $t('pages.problemList')
          }}</el-breadcrumb-item>
          <el-breadcrumb-item class="capitalize">{{ tabList.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="size-5 lg:hidden cursor-pointer"
          @click="showDialog = true"
        >
          <path
            fill-rule="evenodd"
            d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <LazyH5Dialog :showDialog="showDialog" :title="tabList.name">
        <!-- <h1 class="font-medium text-[20px] text-[#121212]">
          {{ tabList.name }}
        </h1> -->
        <div class="flex flex-col">
          <div
            v-for="(i, k) in tabList.articles"
            :key="k"
            class="py-3 pr-3 cursor-pointer select-none"
            :class="key == k ? 'text-red-600 selectbackground' : 'text-[#999999]'"
            @click="switchTabH5(k)"
          >
            <span class="font-medium text-[14.08px]">
              {{ i.title }}
            </span>
          </div>
        </div>
      </LazyH5Dialog>
      <!--  -->
      <!--  内容-->
      <!--  内容-->
      <!--  内容-->
      <div class="lg:py-11 grid grid-cols-4 gap-16 py-6">
        <!-- 左边 -->
        <!-- 左边 -->
        <!-- 左边 -->
        <div class="lg:flex hidden flex-col gap-4">
          <h1 class="font-medium text-[20px] text-[#121212]">
            {{ tabList.name }}
          </h1>
          <div class="flex flex-col">
            <div
              v-for="(i, k) in tabList.articles"
              :key="k"
              class="hovdrs py-3 pr-3 cursor-pointer select-none"
              :class="key == k ? 'text-red-600 selectbackground' : 'text-[#999999]'"
              @click="switchTab(k)"
            >
              <span class="font-medium text-[14.08px]">
                {{ i.title }}
              </span>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <!-- 右边 -->
        <!-- 右边 -->
        <div class="lg:col-span-3 flex flex-col col-span-4 gap-4" v-if="Object.keys(tabList).length">
          <h1 class="font-medium text-[1.25rem] text-[#121212]">
            {{ tabList?.articles[key]?.title }}
          </h1>
          <p class="font-medium text-[14.08px] text-[#666666]" v-html="tabList?.articles[key]?.content"></p>
          <div class="w-full border-t"></div>
          <div class="font-medium text-[14.08px] text-[#262626]">
            {{ $t('problem.title') }}
          </div>
          <div class="flex gap-7 items-center">
            <button
              @click="selectButton('ok')"
              class="rounded-[19.04px] px-3 py-1 flex items-center gap-2"
              :class="selectedButton == 'ok' ? 'bg-[#FF4E33]/10 text-[#FF4E33]' : 'grayscale-[50] bg-[#fff] text-[#B3B3B3]'"
            >
              <img
                src="https://cd.sealmg.com/assets/img/problem-ok-active.png"
                alt="Problem resolved icon"
                title="Mark as resolved"
                class="size-[24px]"
                loading="lazy"
              />
              <span class="font-normal text-[14.08px]">
                {{ $t('problem.ok') }}
              </span>
            </button>
            <button
              :class="selectedButton == 'no' ? 'bg-[#FF4E33]/10 text-[#FF4E33]' : 'grayscale-[50] bg-[#fff] text-[#B3B3B3]'"
              @click="selectButton('no')"
              class="rounded-[19.04px] px-3 py-1 flex items-center gap-2"
            >
              <img
                src="https://cd.sealmg.com/assets/img/problem-no-active.png"
                alt="Problem unresolved icon"
                title="Mark as unresolved"
                class="size-[24px]"
                loading="lazy"
              />
              <span class="font-normal text-[14.08px]">
                {{ $t('problem.no') }}
              </span>
            </button>
          </div>
          <div class="font-medium text-[14.08px] text-[#666666] flex gap-3">
            {{ $t('problem.more') }}
            <NuxtLink class="hover:underline underline-offset-4 text-[#FF4E33]" :to="localePath('/feedback')">
              {{ $t('bottomItem.feedback') }}
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'ProblemDetails',
    layout: 'newsHome',
    data() {
      return {
        key: 0,
        tabList: {},
        query: {},
        showDialog: false,
        selectedButton: null
      }
    },
    head() {
      return {
        title: '问题详情',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'My custom description'
          }
        ]
      }
    },
    watch: {},
    computed: {},
    created() {
      let query = this.$route.query
      this.query = query
      this.getProblem(query)
    },
    methods: {
      selectButton(button) {
        this.selectedButton = button // 更新选中的按钮
      },
      switchTabH5(k) {
        this.key = k
        this.showDialog = false
      },
      closeDialog() {
        this.showDialog = false
      },
      switchTab(k) {
        this.selectedButton = null
        this.key = k
      },
      async getProblem(query) {
        let res = await this.$axios.get(`/api/cms.article/qa`)
        // this.category = res.category || {};
        let arr = res.children.filter(item => item.id == query.id)
        this.tabList = arr?.[0]
        this.key = this.tabList.articles.findIndex(item => item.id == query.ids)
      }
    }
  }
</script>
<style lang="less" scoped>
  .selectbackground {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffebe5 100%) !important;
    border-radius: 0 32px 32px 0;
    color: #ff4e33 !important;
  }
  .hovdrs:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #efefef 100%);
    border-radius: 0 32px 32px 0;
    // color: #ff4e33 !important;
    @apply duration-300 transition-colors;
  }
</style>
